<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Dictionary Lookup - Options</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script language="javascript" type="text/jscript" src="datautil.js">
	</script>
<script language="javascript" type="text/jscript" src="highlighter.js">
</script>
<style>
#popupcontent {
	position: absolute;
	visibility: hidden;
	overflow: hidden;
	border:0px solid #CCC;
	border:2px groove #3399FF;
	padding:1px;
	z-index: 2000;
	background-color: #3399FF;
}
.btn_link {
text-shadow:#0000CC; font-weight:bold
}
.logo_mark {
	float:right;
	font-size: 11px;
	font-weight: lighter;
	color: #003399;
	filter: Shadow(Color="#6699CC", Direction="135");
}
#down_right_btn a:link, #down_right_btn a:hover, #down_right_btn a:active, #down_right_btn a:visited {
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	color:#003399;
}

#logo a:link, #logo a:hover, #logo a:active, #logo a:visited {
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	color:#009933;
}
a:link, a:hover, a:active, a:visited {
	font-size: 12px;
	font-weight: bold;
	color: #CC0033;
	text-decoration: none;
}
body {
	font-size: 12px;
	color: #003399;
}
.outer_define {
	height: 100px;
	width: 500px;
}
.div_left {
	position: relative;
	text-align : left;
	overflow:hidden;
	white-space:nowrap;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #999999;
	border-right-color: #999999;
	border-bottom-color: #999999;
	border-left-color: #999999;
}
#saveStatusMessage {
	position:relative;
	overflow:hidden;
	white-space:nowrap;
	display: block;
	color: #FFFFFF;
	text-align:center;
	text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 1px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#BBBBBB), to(gray));
	border-radius: 15px;
	padding: 5px 5px;
	opacity: 0;
	-webkit-transition: opacity 1.5s ease;
	font-size: 12px;
	height:18px;
	width: 200px;
	float: left;
	font-weight: bold;
}
	  
</style>
<script language="javascript" type="text/javascript">  
/**
      = Hello Vocabulary @2010 =
	version 0.2.10
http://code.google.com/p/hello-vocabulary/
******************************************************

Copyright (c) 2010 Mead, laiqinyi@gmail.com


@ MIT License:Licensing
http://www.opensource.org/licenses/mit-license.php
@ Creative Commons License
http://creativecommons.org/licenses/by/2.5/legalcode
**/
// open a new url Tab.
function openTab(surl){
	chrome.tabs.getSelected(
		null,    
		function(tab){
			var createTabParams = { url: surl };
			if (tab){
				createTabParams.index = tab.index + 1;
			}
			chrome.tabs.create(createTabParams);
		}
	);
}
//urls.url,urls.title,urls.ftime,urls.ltime


function getURLData(){
	var list = getAllURL();
	var urls = new Array();
	var div_url_list = document.getElementById("url_list");
	while (div_url_list.firstChild) {
      var oldNode = div_url_list.removeChild(div_url_list.firstChild);
       oldNode = null;
     }
	//adjust the Height of pup up page.
	all_H = 20*list.length+30;
	setHeight(all_H);
	
	// render URL list
	for(var k=0;k<list.length;k++){
		
		var obj = getURLProperty(list[k]);		
		var oA = document.createElement("A");
	 	var oText = document.createTextNode(obj.title);
		//must do it, copy the value, not reference to Array obj
		var text = list[k];
		//console.log("TEXT#"+text);	
		oA.onclick = function (){	
			var	txt = this.getAttribute("title");
			//alert(txt);		
			openTab(txt);				
			//console.log("openTab#"+text);	
		};
		oA.href="#";
		oA.title=text;
	 	oA.appendChild(oText);
		//delete icon
		var oDel = document.createElement("A");
		oDel.innerHTML="<img src='img/cross_48.png' width='15' height='15' />";
		//save URL
		oDel.href=text;
		oDel.title="delete me!";
		oDel.onclick = function (){	
			var	txt = this.getAttribute("href");
			//here is ridiculous, Why I can't put 
			//text or list[k] 
			//as param????
			delURL(txt);			
			//console.log("delete#"+txt);	
			//refresh it
			getURLData();
			showInfo("You have deleted an url!");
		};
		//icon for word list, when mouse on, show it.--pop up.   cross_48.png
		var oWord = document.createElement("A");
		oWord.innerHTML="<img src='img/search_48.png' width='15' height='15' />";
		//save URL
		oWord.href=text;
		//oWord.id="a_"+k;
		//oWord.title="show words!";
		//onmouseover
		oWord.onmouseover = function (e){	
			var	txt = this.getAttribute("href");
			//set golble var
			wordlist = getWords(txt);
			var popUp = document.getElementById("popupcontent");
			var key_word = wordlist.join(" ");
			popUp.innerHTML = " &nbsp;&nbsp;&nbsp;&nbsp; "+key_word;								
			//var height_ = 15 + (key_word.length*16/30);
			var height_ = popUp.offsetHeight; 
			 if( (all_H - pointerY()-height_ + 20)>=0 ){
			 	//console.log(pointerY()+"=enough=" + height_);
			 	//re-size the All outer page size.
	   		 	setHeight(all_H);					
				//multi-line, with width == 300
				showPopup(pointerY(),pointerX()+30,300,height_);
			 					
			 }else{	
			 		//console.log(pointerY()+"not enough" + height_);
			 		if(height_ > all_H){
					 	setHeight(height_+20);
						//console.log("reset all_H" + height_);
					}
					showPopup(pointerX(),pointerX()+30,300,height_);
					//alert("adjust="+height_);	
					
			 }
		};
		//
		div_url_list.appendChild(oDel);
		div_url_list.appendChild(oWord);
	 	div_url_list.appendChild(oA);
		div_url_list.appendChild(document.createElement("BR"));
	}
	return urls;
}

									
//get current mouser axis-X
function pointerX() 
    {   
     return event.pageX; 
    }
    
     function pointerY()
    {   
     return event.pageY ; 
    }

//show the words list.
function showPopup(top,left,w,h){  
	var popUp = document.getElementById("popupcontent");
	
	popUp.style.top =top+ "px";     
	popUp.style.left = left+"px";     
	popUp.style.width =  "300px";     
	//popUp.style.height = h + "px";
	popUp.style.visibility = "visible";
	//lighter it
	hl.highlight(popUp, wordlist.join(" ")); 		
}

function clearUp(){
	var back_d = clearUpData();
	if(back_d==0){
		showInfo("All Data has been Clear Up!");
	}else if(back_d==99){
		showInfo("No data inside, Nothing to do!");
	}else{
		showInfo("Cause some Error, please debug it or report it! " + back_d);
	}
	
	
}

function removeAll(){
	if(delAllData()){
		showInfo("All Data has been Delete!");
	}else{
		showInfo("Cause some Error, please debug it or report it!");
	}	
	
}

function showInfo(msg){
 	// Fade in status message.
        var status = document.getElementById('saveStatusMessage');
		status.innerText=msg;
        status.style.opacity = 1;
        setTimeout(function() {
          status.style.opacity = 0;
        }, 2000);

	  
}
	  
// close the pop up words list.
function hiddenPopup(){
	var popUp = document.getElementById("popupcontent");	
	popUp.style.visibility = "hidden";
	popUp.innerText="";
	//reSet the height
	setHeight(all_H);	
}
//change the all Page Height.
function setHeight(px){
	var outer = document.getElementById("outer");
	outer.style.height=px+"px";
}
// goloble var
var hl = new Highlighter();  
//sometimes wanna modify it.
var all_H =30,wordlist; 

</script>
</head>
<body onload="getURLData();">
<!--begin whole page, div=outer-->
<div id="outer" class="outer_define">
  <div  class="logo_mark"
           title="Copyright (c) 2010 Mead, @MIT License is a free software license originating at the Massachusetts Institute of Technology (MIT), used by the MIT X Consortium. Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the 'Software'), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:

 The above copyright notice and this permission notice shall be included in
 all copies or substantial portions of the Software.

 THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.">
           @2010 Terms of Use: MIT License 
		  	&nbsp;&nbsp; 
  </div>              
		  <a class="btn_link" onmouseover="hiddenPopup();">
		  <img src="img/refresh_4_8.png" width="15" height="15" />
		  	close tip
  </a>
		  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		 
	    <span id="logo">
     	<a onclick="openTab('https://chrome.google.com/extensions/detail/chhjaifllldeekdnncankgcpccggdfkp')"
		   				href="#"
                        title="Vote me!"
                        >
		   				Hello Vocabulary
    	</a>
	    </span> 
<br/>
	
<hr/>
  			 <!--url_list-->
				<div class="div_left" id="url_list"></div> 
                 
</div>
<!--end whole page, div=outer-->
<br/>
<hr/>
			 <!--pop word list, hidden, at first-->
			<div id="popupcontent">Div pop up, to show word list.</div>
		  &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;	  
			<a class="btn_link" onmouseover="hiddenPopup();"
             title="remove the popup of Word List..">
		  		<img src="img/refresh_4_8.png" width="15" height="15" />
		  		close tip
			</a>	        
	  
            
<div  class="logo_mark" id="down_right_btn"> 
<div id="saveStatusMessage">Message info to user</div> 
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; 
 
  <a href="#" style="text-shadow:#0000CC; font-weight:bold"  
                        title="clear the dirt data, if you find something wrong. Although we tested strictly, and find it's reliable!" 
                        onclick="clearUp();">
					  		<img src="img/database_clear_up_48.png" width="18" height="18" />
					  		clear up
  </a>							
						&nbsp;&nbsp;&nbsp;&nbsp; 
  <a href="#" style="text-shadow:#0000CC; font-weight:bold" 
                        title="will remove all URLs and words, empty the storage" 
                        onclick="removeAll();">
					  		<img src="img/database_remove_48.png" width="18" height="18" />
					  		remove all
  </a>	
</div>    

 
</body>
</html>
